<template>
  <div class="write-offConfirm">
     <div class="write-offConfirm-order">
       <div class="write-offConfirm-order-t">报名活动核销凭证</div>
       <img v-if="stateDisplay == 'USED'" class="write-offConfirm-order-img" src="@/assets/img/hx/yhx@2x.png">
       <img v-if="stateDisplay=='DELETE'" class="write-offConfirm-order-img" src="@/assets/img/hx/yzf@2x.png">
       <ul>
         <li><h4 style="color:black">{{codeInfo.title ||'~'}}</h4></li>
         <li>报 名 人：{{codeInfo.nickName}}</li>
         <li>报名时间：{{codeInfo.createTime}}</li>
         <li>实际付款：<span style="color:red">￥{{codeInfo.cost || 0}}</span></li>
         <li>数 字 码：{{codeInfo.code}}</li>
       </ul>
     </div>
     <div v-if="stateDisplay=='UN_USED'" class="write-offConfirm-btn" @click="confirm">确认核销</div>
     <div v-else class="write-offConfirm-btn" @click="back">返回</div>
  </div>
</template>

<script>
import { writeoff } from '@/api/request.js';
import { getStore } from '@/assets/js/utils.js';
import { MessageBox } from 'mint-ui';

export default {
  name: 'write-offConfirm',
  props:['codeInfo'],
  data() {
    return {
      stateDisplay:'',
    }
  },
  created(){
    this.stateDisplay = this.codeInfo.state
  },
  mounted() {
    console.log(this.codeInfo);
  },
  methods: {
    confirm(){
      let that = this;
      MessageBox.confirm('确定核销?').then(action => {
        let hxUser = getStore('hxUser');
        writeoff(this.codeInfo.code,hxUser.id).then(res => {
            if (res.code == 1) {
              that.stateDisplay = 'USED'
            }
          }).catch(err => console.log(err))
      });
    },
    back(){
      this.$router.go(0);  //有闪烁，后期优化
      // this.$emit('closeCon')
    }
  },
  components: {
    
  }
}
</script>
<style scoped lang="scss">
.write-offConfirm{
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  &-order{
    position: relative;
    background-color: white;
    padding: 0px 10px 10px 10px;
    &-t{
      font-size: 18px;
      color:#FEBF00;
      padding: 10px 5px;
      border-bottom: 1px dotted #FEBF00;
    }
    &-img{
      width:60px;
      position: absolute;
      right: 10px;
      top:55px;
    }
    ul li{
      list-style: none;
      margin: 10px;
      color:#7C7C7C;
    }
  }
  &-btn{
    background-color: #FEBF00;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    text-align: center;
    width: 80%;
    margin:30px auto;

  }

}
</style>
